<style lang='less'>
	.scan-record-page {
		.el-date-editor.el-input, .el-date-editor.el-input__inner {
			width: 260px;
		}
		.table-operate-area {
			.search-input {
				min-width: 200px;
				width: 20%;
			}
		}
		.search-input .el-input__inner {
			display: inline-block;
		}
	}
</style>
<template>
	<div class="table-contain-inner scan-record-page">
		<div class="table-operate-area">
			<el-button-group v-if="tb_selection_arr.length" style="display:flex;">
				<el-button type="danger" @click="deleteRecord()">删除</el-button>
				<el-button type="info" @click="cleanSelection">取消</el-button>
			</el-button-group>
			<el-tooltip class="filter-item" effect="dark" content="只会导出当前筛选(排序)条件下的数据" placement="bottom-start">
				<el-button :disabled="record_data.length==0" type="primary" @click="exportToExcel" :loading="btn_loading_export">
					<i style="margin-right: 6%;" class="el-icon-document"></i>导出Excel
				</el-button>
			</el-tooltip>
			<el-cascader
				class="filter-item"
		    expand-trigger="hover"
		    filterable
		    change-on-select
		    placeholder="选择部门"
		    :props="{value:'id',label:'name',children:'jobs'}"
		    v-model="job_selected_arr"
		    :options="departments">
		  </el-cascader>
		  <el-date-picker
		  	class="filter-item"
	      v-model="date"
	      type="daterange"
	      align="right"
	      unlink-panels
	      range-separator="至"
	      start-placeholder="起始日期"
	      end-placeholder="结束日期"
	      value-format="yyyy-MM-dd"
	      :picker-options="pickerOptions2">
	    </el-date-picker>
	    <el-date-picker
	    	class="filter-item"
	      v-model="add_date"
	      type="daterange"
	      align="right"
	      unlink-panels
	      value-format="yyyy-MM-dd"
	      range-separator="至"
	      start-placeholder="起始添加时间"
	      end-placeholder="结束添加时间"
	      :picker-options="pickerOptions2">
	    </el-date-picker>
			<el-input class="search-input filter-item" v-model="search_val" @keydown.native.13="searchHandle">
				<template slot="prepend">
					<el-select v-model="search_type">
				    <el-option value='id_num' label='工号'></el-option>
				    <el-option value='user_name' label='姓名'></el-option>
				  </el-select>
				</template>
			</el-input>
			<el-button type="primary" @click="searchHandle">筛选</el-button>
		</div>
		<el-table class="record-table" row-key="id" @filter-change="filterChangeHandle" v-loading="tb_loading" @sort-change="sortChangeHandle" :data="parse_record_data" @selection-change="handleSelectionChange" ref="records_table">
			<el-table-column
	      type="selection"
	      width="55">
	    </el-table-column>
			<el-table-column
	      label="工号"
	      min-width="100%"
	      prop="userIdNum">
	    </el-table-column>
	    <el-table-column
	      prop="user_name"
	      label="姓名">
	    </el-table-column>
	    <el-table-column
	    	min-width="100px"
	    	prop="salaryDate"
	    	sortable
	      label="日期">
	    </el-table-column>
	    <el-table-column v-for="record_key in record_keys"
	    	:key="record_key.idKey"
	    	:label-class-name="record_key.status == 2?'hidden':''"
	      :prop="'salaryData['+record_key.idKey+']'"
	      :show-overflow-tooltip="true"
	      :label="record_key.label">
	    </el-table-column>
	    <el-table-column
	    	min-width="160px"
	    	prop="addTime"
	    	sortable
	      label="添加时间">
	    </el-table-column>
	    <el-table-column
	    	prop="status"
	    	width="80px"
	    	column-key="status"
	    	:filters="[{value:1,text:'显示'},{value:'2',text:'隐藏'}]"
	    	:filter-multiple="false"
	      label="状态">
	      <template slot-scope="scope">
		      {{scope.row.status==1?'显示':scope.row.status==2?'隐藏':''}}
		    </template>
	    </el-table-column>
	    <el-table-column
	    	min-width="160px"
	    	fixed="right"
	      label="操作">
	      <template slot-scope="scope">
      		<el-button type="text" class="btn-resolve" @click="editRecord(scope.row)">修改</el-button>
			    <el-button v-if="scope.row.status==2" type="text" class="btn-resolve" :loading="btn_loading_status==scope.row.id" @click="triggerRecordStatus(scope.row.id, 1)">显示</el-button>
			    <el-button v-if="scope.row.status==1" type="text" class="btn-resolve" :loading="btn_loading_status==scope.row.id" @click="triggerRecordStatus(scope.row.id, 2)">隐藏</el-button>
      		<el-button type="text" class="btn-resolve" :loading="btn_loading_delete==scope.row.id" @click="deleteRecord(scope.row.id)">删除</el-button>
	      </template>
	    </el-table-column>
		</el-table>
		<el-pagination background :page-sizes="[10, 20, 50, 100]" :page-size.sync="page_size" layout="sizes, prev, pager, next, jumper" :page-count="page_total" :current-page.sync="page_no"></el-pagination>
		<editRecord ref="edit_record_dialog" :record_keys="record_keys" @reloadTb="getRecordData"></editRecord>
	</div>
</template>
<script>
	import editRecord from 'components/admin/edit_record.vue';
	import { exportExcel } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				record_data: [],
				tb_loading: false,
				page_no: 1,
				page_total: 1,
				page_size: 10,
				departments: [],

				search_type: 'id_num',
				search_val: '',

				filters: {},
				cus_filters: {},

				btn_loading_delete: '',
				btn_loading_status: '',
				btn_loading_export: false,

				date: '',
				add_date: '',
				job_selected_arr: [],
				tb_selection_arr: [],

				record_keys: [],
				pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
			}
		},
		watch: {
			page_no() {
				this.getRecordData();
			},
			page_size() {
				this.reloadTb();
			}
		},
		computed: {
			parse_record_data() {
				return this.record_data.map(record => {
					try {
						record.salaryData = JSON.parse(record.salaryData);
					}catch(e) {
						record.salaryData = {}
					}
					return record;
				})
			}
		},
		methods: {
			editRecord(record) {
				if(record) {
					this.$refs.edit_record_dialog.show(record);
				}
			},
			exportToExcel() {
				this.btn_loading_export = true;
				this.$axios_blob.get('/admin/exportSalary', Object.assign({},this.filters,this.cus_filters, this.search_filters)).then(res => {
					if(res && res.data) {
						let sheet_des = res.headers['content-disposition'];
						exportExcel(res.data, sheet_des.substr(sheet_des.indexOf('filename=')+9));
		    		this.$message.success('导出成功');
					}
				}).finally(() => {
					this.btn_loading_export = false;
				})
			},
			deleteRecord(record_id) {
				let selection_length = this.tb_selection_arr.length;
				if(record_id || selection_length) {
					let delete_length = record_id ? 1 : selection_length;
					record_id = record_id ? record_id : this.tb_selection_arr.map(val => val.id).join(',');
					this.$confirm(`确定删除${delete_length==1?'该':'这'+delete_length+'条'}记录?`, '警告', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	        	this.btn_loading_delete = record_id;
	        	this.$axios.get('/admin/deleteRecordSingle/'+record_id).then(res => {
	        		if(res.s == 1) {
	        			this.$message.success('删除成功');
	        			this.getRecordData();
	        		}
	        	}).finally(() => {
	        		this.btn_loading_delete = '';
	        	})
	        }).catch(() => {
	          this.$message.info('取消操作');          
	        });
				}
			},
			triggerRecordStatus(record_id, status) {
				if(record_id && status) {
        	this.btn_loading_status = record_id;
        	this.$axios.post('/admin/editRecordSingle',{id: record_id, status: status}).then(res => {
        		if(res.s == 1) {
        			this.$message.success('操作成功');
        			this.getRecordData();
        		}
        	}).finally(() => {
        		this.btn_loading_status = '';
        	})
				}
			},
			handleSelectionChange(record) {
				this.tb_selection_arr = record;
			},
			cleanSelection() {
				this.$refs.records_table.clearSelection();
			},
			searchHandle() {
				let res_filter = {};
				if(this.job_selected_arr[0]) res_filter.department_id = this.job_selected_arr[0];
				if(this.job_selected_arr[1]) res_filter.job_id = this.job_selected_arr[1];
				if(this.add_date) {
					res_filter.time_start = this.add_date[0];
					res_filter.time_end = this.add_date[1];
				}
				if(this.date) {
					res_filter.date_start = this.date[0];
					res_filter.date_end = this.date[1];
				}
				if(this.search_val) res_filter[this.search_type] = this.search_val;

				this.cus_filters = res_filter;
				this.reloadTb();
			},
			getRecordData() {
				this.tb_loading = true;
				this.$axios.get('/admin/getRecord/'+this.page_no+'/'+this.page_size, Object.assign({},this.filters,this.cus_filters, this.search_filters)).then(res => {
					if(res.s == 1) {
						let res_data = res.d;
						this.page_total = res_data.page_count;
						this.record_data = res_data.list;
					}
				}).finally(() => {
					this.tb_loading = false;
				})
			},
			getRecordKeys() {
				this.$axios.get('/admin/getSalaryKeyOn').then(res => {
					if(res.s == 1) {
						this.record_keys = res.d;
					}
				})
			},
			filterChangeHandle(filter){
				let filter_key = Object.keys(filter)[0];
				if(filter_key) {
					let filter_val = filter[filter_key][0];
					if(filter_val != undefined) {
						this.filters[filter_key] = filter_val;
					}else if(this.filters[filter_key]) {
						delete this.filters[filter_key];
					}
				}
				this.reloadTb();
			},
			sortChangeHandle({ order, prop }) {
				if(order && prop) {
					this.filters.order_by = (prop=='addTime'?'add_time':prop=='salaryDate'?'salary_date':prop)+' '+(order == 'ascending' ? 'asc' : 'desc');
				}else {
					delete this.filters.order_by;
				}
				this.reloadTb();
			},
			reloadTb() {
				if(this.page_no == 1) {
					this.getRecordData();
				}else {
					this.page_no = 1;
				}
			}
		},
		components:{
			editRecord
		},
		created() {
			this.getRecordKeys();
			this.getRecordData();
			this.$axios.get('/admin/getDepartment').then(res => {
				if(res.s == 1) {
					this.departments = [{id:0,name:"全部"}].concat(res.d);
				}
			})
		}
	}
</script>